<template>
  <div id='tmpl'>
    <!--整个项目的头部-->
    <mt-header fixed title="vue商城"></mt-header>
    <!--返回按钮-->

    <div v-if="isshow" id="back">
      <a href="javascript:void(0)" @click="backto">返回</a>
    </div>

    <!--vue-router占位-->
    <router-view></router-view>
    <!--mui中的tabbar实现系统底部-->
    <nav class="mui-bar mui-bar-tab">
      <router-link class="mui-tab-item " to="/home">
        <span class="mui-icon mui-icon-home"></span>
        <span class="mui-tab-label">首页</span>
      </router-link>
      <router-link class="mui-tab-item" to="/tabbar-with-chat">
        <span class="mui-icon mui-icon-email"></span>
        <span class="mui-tab-label">会员</span>
      </router-link>
      <router-link class="mui-tab-item" to="/shopcar">
        <span class="mui-icon mui-icon-contact">
        <span id="badge" class="mui-badge">0</span></span>
        <span class="mui-tab-label">购物车</span>
      </router-link>
      <router-link class="mui-tab-item" to="/tabbar-with-map">
        <span class="mui-icon mui-icon-gear"></span>
        <span class="mui-tab-label">搜索</span>
      </router-link>
    </nav>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        isshow: false
      };
    },
    watch: {
      '$route': function (newroute, oldroute) {
        if (newroute.path.toLowerCase() == '/home') {
          this.isshow = false;
        } else {
          this.isshow = true;
        }
      }
    },
    methods: {
      backto() {
        this.$router.go(-1);
      }
    },
    created() {

    }
  }

</script>

<style lang="less" scoped>
  #back {
    width: 60px; // height: 60px;
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 105;
  }

  #back a {
    color: white;
    font-size: 16px;
    font-weight: bold;
  }

</style>
